<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link href="./CSS/Site1.css" type="text/css" rel="stylesheet"/>
        <%--<script language="javascript">
            function onCreateUser() {
                document.location.href = "../../DangKyServlet";
        
            }
            function onDeleteUser() {
                if (confirm("Selected users will be deleted? Are you sure?")) {
                    document.ListOfUserForm.action = "DeleteUserServlet";
                    document.ListOfUserForm.submit();
                    
                }
            }
        </script>--%>

        <link href="../../CSS/Site1.css" type="text/css" rel="stylesheet"/>
        <script>
            function KTForm(form)
            {
                var username = form.username.value;
                var password = form.password.value;
                var fullname = form.fullname.value;
                var confirmPass = form.ConfirmPassword.value;
                var email = form.email.value;
                var errors = [];
                
                if(!checkLength(username))
                {errors.push("You must enter username");}
                
                if(!checkLength(password))
                {errors.push("You must enter password");}
                
                if(!validateConfirm(password, confirmPass))
                {
                    errors.push("Password not match");
                }
                
               
                if(errors.length>0)
                {
                    reportErr(errors);
                    return false;
                }

            }
            
            function reportErr(errors)
            {
                var msg = "There are some problems: ";
                var numError;
                for(var i=0;i<errors.length;i++)
                {
                    numError = i+1;
                    msg += "\n" + numError + "." + errors[i];
                }
                alert(msg);
            }
            function validateConfirm(fld1,fld2)
            {
                if(fld1.value == fld2.value)
                {return true}
                else 
                    return false;
            }
            function checkLength(fld,min,max)
            {
                var min = min || 1;
                var max = max || 20;
            
            <%//khong duoc de trong%>                
                    if ((fld.length > max) || (fld.length < min))
                    {
                        return false;
                    }
                    return true;
                }
                
                function validateEmail(email)
                {
                    var atpos = email.indexOf("@");
                    var dotpos = email.lastIndexOf(".");
                    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
                    {
                        return false;
                    }
                }
        </script>
    </head>
    <body class="main" background="/DeAn_WebTruyen/Images/111vjo.jpg">
        <div class="container">
            <div class="header_top_left">
                <%
                    Date d = new Date();
                    DateFormat dateFormat = new SimpleDateFormat("dd/MM/YYYY");

                    out.print(dateFormat.format(d));
                %>
            </div>               
            <%--<div class="clear"></div>--%>
            <div class="header_main" > 
                <script type="text/javascript">
        
                    var img1="12855184861024648803.jpg"
                    var img2="12855185051828767054.jpg"
                    var img3="1285518514197142706.jpg"
                    var img4="1285518527375730281.jpg"
                    var img5="1285518537601341394.jpg"

                    var cur=Math.round(5*Math.random())
                    if (cur<=1)
                    {
                        img=img1
                    }
                    else if (cur<=2)
                    {
                        img=img2
                    }
                    else if (cur<=3)
                    {
                        img=img3
                    }
                    else if (cur<=4)
                    {
                        img=img4
                    }        
                    else
                        img=img5
                    document.write('<div class="header_main" > <img src="../../Images/'+img+'"/></div>')
              
        
                </script>
            </div>
            <%--<script type="text/javascript">
                $(document).ready(function(){
                    $("#dangky").validate(
                    {
                        rules:
                            {
                            username: {required:true, minlength:5, maxlength:30},
                            password:{required:true, minlength:3, maxlength:30},
                            ConfirmPassword:{required:true,minlength:3, maxlength:30 },                            
                            email: {required:false, email:true}
                            
                        },
                        messages:
                            {
                            username:{required:"*", minlength:"Tên đăng nhập phải từ 5 - 30 ký tự",maxlength:"Tên đăng nhập phải từ 5 - 30 ký tự"},
                            password:{required:"*", minlength:"Tên đăng nhập phải từ 3 - 30 ký tự", maxlength:"Tên đăng nhập phải từ 3 - 30 ký tự"},
                            ConfirmPassword:{required:"*"},
                            email: {email:"Vui lòng nhập lại email"}
                        },
                        submitHandler: function(form){
                            if(confirm("Dữ liệu không hợp lệ.Bạn có muốn tiếp tục ??"))
                            {
                                form.submit();
                            }
                        }
                    });
                });
            </script>--%>


            <div class="clear"></div>
             <div class="container">
                       <script type="text/javascript">
                <!--
                stm_bm(["menu4448",980,"","/DeAn_WebTruyen/Menu/blank.gif",0,"","",0,0,500,0,1000,1,0,0,"","100%",0,0,1,2,"default","hand","",1,25],this);
                stm_bp("p0",[0,4,0,0,0,0,0,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","/DeAn_WebTruyen/Menu/line1.gif",3,0,0,"#000000"]);
                stm_ai("p0i0",[0,"Home","","",-1,-1,0,"/DeAn_WebTruyen/Home.jsp","_self","","","","",0,0,0,"","",0,0,0,1,1,"#E6EFF9",1,"#E6EFF9",1,"/DeAn_WebTruyen/Menu/line.gif","/DeAn_WebTruyen/Menu/line2.gif",3,3,0,0,"#E6EFF9","#000000","#045257","#7e4076","bold 12pt Verdana","bold 16pt Verdana",0,0,"/DeAn_WebTruyen/Menu/left1.gif","/DeAn_WebTruyen/Menu/left2.gif","/DeAn_WebTruyen/Menu/right1.gif","/DeAn_WebTruyen/Menu/right2.gif",14,19,37],200,0);
                stm_aix("p0i1","p0i0",[0,"List Users","","",-1,-1,0,"/DeAn_WebTruyen/ListUsersServlet"],200,0);
             
                stm_aix("p0i2","p0i0",[0,"Story List","","",-1,-1,0,"/DeAn_WebTruyen/ListAllStories","_self","","Liên hệ"],200,0);
                stm_ep();
                stm_cf([0,0,0,"Main_frame","Navigation_frame",1]);
                stm_em();
                //-->
            </script>
            </div>
            <div class="container_center">
                <form name="DK" action="../../DangKyServlet"  style="text-align: center" onsubmit="return KTForm(this);" method="post">
                    <table width="300" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#00CCFF">
                        <tr>
                            <td><h1>Create a new user</h1></td>

                        </tr>
                    </table>
                    <table border="0">
                        <tr>
                            <td>Username</td>
                            <td><input type="text" name="username" value="" /></td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td><input type="password" name="password" value="" /></td>
                        </tr>
                        <tr>
                            <td>Confirm Password</td>
                            <td><input type="password" name="ConfirmPassword" value="" /></td>
                        </tr>
                        <tr>
                            <td>Full Name</td>
                            <td><input type="text" name="fullname" value="" /></td>
                        </tr>
                        <tr style="text-align: left">
                            <td>Sex</td>
                            <td>
                                <select name="sex">
                                    <option>Nam</option>
                                    <option>Nữ</option>
                                </select>   
                            </td>
                        </tr>


                        <tr>
                            <td>Address</td>
                            <td><input type="text" name="address" value="" /></td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td><input type="text" name="email" value="" /></td>
                        </tr>
                        <tr>

                            <td colspan="2" style="text-align: center">
                                <input type="submit" value="Đăng ký" name="Đăng ký" />
                                <input type="button" value="Thoát" name="Thoát" onclick="history.back()"/>
                            </td>

                        </tr>
                    </table>

                </form>
            </div>
        
               <div style=" background-image:url(/DeAn_WebTruyen/Images/footer_bg2.jpg) ; color: #FF0000;">
                <p >
                    © Copyright . All right reserved
                    <br />
                    Email: <a href="mailto:maiphuong0403@Gmail.com"><img src="/DeAn_WebTruyen/Images/gmail-icon.gif">MaiPhuong0403@Gmail.com</a>
                <ul style="text-align: center">
                    Power by<img src="/DeAn_WebTruyen/Images/Untitled.png" />
                </ul>
                </p>

            </div>
            </div>
    </body>
</html>
